<!-- 倒计时组件 -->
<template>
    <div>
        <span>获取验证码（{{ time }}s）</span>
    </div>
</template>

<script setup lang="ts">
//引入组合式api函数ref
import { ref, watch } from 'vue';
//倒计时事件
let time = ref<number>(5);

//接受父组件传递过来的props -> flag:用于控制计数器组件的显示与隐藏
let props = defineProps(['flag']);
let $emit = defineEmits(['getFlag']);

//监听父组件传递过来props数据变化
watch(
    () => props.flag,
    () => {
        //开始定时器
        let timer = setInterval(() => {
            time.value--;
            if (time.value == 0) {
                //通知父组件倒计时模式结束
                $emit('getFlag',false);
                //倒计时为零时，清除倒计时
                clearInterval(timer);
            }
        }, 1000)
    },
    {
        immediate: true,
    }
)





</script>

<style lang="scss" scoped></style>